<template>
  <el-container>
    <el-main>
      <el-form
        ref="articleForm"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <div
          style="
            width: 100%;
            display: flex;
            align-items: flex-end;
            border-bottom: 1px #eee solid;
            margin-bottom: 20px;
          "
        >
          <span style="font-size: 18px; color: #409eff; margin: 10px 0"
            >基本信息</span
          >
        </div>
        <el-form-item label="主标题" prop="title">
          <el-col :span="5">
            <el-input v-model="form.title" />
          </el-col>
        </el-form-item>
            <el-form-item label="作者/来源" prop="author">
          <el-input v-model="form.author" style="width: 320px" />
        </el-form-item>
      <div class="second" style="display: flex;">
        <el-form-item label="缩略图">

          <single-upload style="width: 110px" v-model="form.thumbnail" />
        </el-form-item>
        <el-form-item label="" prop="subTitle" class="subTitle">
          <el-col :span="5">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入副标题"
              v-model="form.subTitle"
              style="width: 180px; height:140px;margin-left:-53px"

            >
            </el-input>
          </el-col>
        </el-form-item>
      </div>

        <el-form-item label="分类">
          <el-col :span="5">

              <el-cascader
              v-model="value"
              :options="articleCategory"
              :props="props"
              ref="cascaderDept"
              style="width:320px"


            >
            </el-cascader>
          </el-col>
        </el-form-item>
        <el-form-item label="位置标签">
          <el-select
            v-model="tagData"
            multiple
            placeholder="请选择"
            style="width: 320px"
          >
            <el-option
              v-for="item in tagForm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否草稿">
          <el-radio-group v-model="form.isDraft">
            <el-radio :label="false">发布</el-radio>
            <el-radio :label="true">草稿</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章类型">
          <el-radio-group v-model="form.linkType">
            <el-radio :label="0">图文介绍</el-radio>
            <el-radio :label="1">链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.linkType">
          <el-form-item label="链接" prop="author">
            <el-input v-model="form.linkAddress" style="width: 320px" />
          </el-form-item>
        </template>
        <template v-else>
          <div
            style="
            width: 100%;
            border-bottom: 1px #eee solid;
            margin-bottom: 20px;
          "
          >
          <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >图文介绍</span
          >

            <tinymce
              v-model="form.content"
              :height="400"
              style="margin-top: 20px"
            />
          </div>
        </template>

        <el-button
          class="el-button—class"
          type="primary"
          :loading="clicked"
          @click="saveArticle('articleForm')"
        >
          &nbsp&nbsp完 成&nbsp&nbsp
        </el-button>
      </el-form>

      <category-dialog
        ref="categoryDialog"
        request="articleCategory"
        @confirm="categoryDialogConfirm"
      />

    </el-main>
  </el-container>
</template>
<style scoped>
.el-button—class {
  margin-top: 20px;
}
/deep/.el-upload__tip{
  display: none;
}
/deep/.el-textarea__inner{
  height: 140px;
}
</style>
<script>
import { list as classlist } from "@/api/articleCategory";
import VideoUpload from "@/components/Upload/videoUpload";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { save } from "@/api/article";
import { list as tagList } from "@/api/tag";
import Tinymce from "@/components/Tinymce";
import CategoryDialog from "@/components/CategoryDialog";
import SingleUpload from "@/components/Upload/singleUpload";
export default {
  name: "hostpot-add",
  filters: {},
  components: {
    Tinymce,
    CategoryDialog,
    SingleUpload,
    VideoUpload,
  },
  data() {
    return {
       value: [],
      props: {
        value: "id",
        label: "name",
        children: "childrens"

      },
      singleUploadTitle: "750*900",
      clicked: false, // 按钮防双击
      categoryName: "",
      articleCategory: [],
      form: {
        author: '',
        mediaType: 0,
        linkType: 0,
        linkAddress: "",
        isDraft: false, // 是否为草稿
        title: "",
        subTitle: "",
        thumbnail: "",
        content: "",
        articleCategoryId: "",
        articleType: 1,
        authority: 0,
        articleMeta: {
          address: "",
          time: "",
          // video: "",
          // images:""
        },
        price: 0,
        orders: 0,
      },
      isDraft: 0,
      subscribe: false,
      tagData: [],
      tagForm: [],

      rules: {
        title: [
          { required: true, message: "请输入主标题", trigger: "blur" },
        ],

        thumbnail: [
          { required: true, message: "请上传缩略图", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.tagList();
    this.getclassification()
  },
  methods: {
 changeArticle(val, index) {
      console.log(val);
      console.log(this.value);
      if(val.childrens.length == 0 ){
        this.$refs.cascaderDept.dropDownVisible = false
        // this..
      }
      // console.log(index);
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].childrens.length<1){
          // children若为空数组，则将children设为undefined
          data[i].childrens=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].childrens);
        }
      }
      return data;
    },

       getclassification() {
      let params = new URLSearchParams();

      params.append("articleType", this.form.articleType);
      classlist(params).then((res) => {
        console.log(res);
        this.articleCategory = this.getTreeData(res.data);
        console.log(this.articleCategory);
      });
    },
    dialogShow() {
      console.log("点击了");
      this.$refs.categoryDialog.show();
    },
    categoryDialogConfirm(val) {
      this.form.articleCategoryId = val.id;
      this.categoryName = val.name;
    },
    tagList() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", 1);
      params.append("pageSize", 20);
      params.append("type", 0);
      tagList(params)
        .then((response) => {
          console.log(response);
          _this.tagForm = response.data.data;
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    saveArticle(form) {
      console.log(this.form);
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          let params = new URLSearchParams();
          _this.tagData.forEach(function (item) {
            params.append("tagIds", item);
          });
        this.form.articleCategoryId=this.value[this.value.length-1]
          save(_this.form, params)
            .then((response) => {
              console.log(response);
              _this.clicked = false;
              if (response.type == "success") {
                EventBus.$emit("hotspot-add", response.data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({ visitedViews }) => {
                    _this.$router.push({
                      path: "/hotspot/list",
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true,
                });
              }
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
